<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            padding:0;
            margin:0;
            width:100%;
            height:100%;
        }
        #canvas{
            border:1px solid #685e48;
            margin-left:20px;
        }
        .tools{
            display: flex;
            padding:20px;
        }
        #imageUpload{
            opacity: 0;
            height:100%;
            position:relative;
            z-index:2;
        }
        .tools .item{
            background:#93d5dc;
            height:32px;
            display:flex;
            justify-content: center;
            align-items:center;
        }
        .item{
            border-radius:4px;
            margin-right:10px;
            padding:0 10px;
            cursor:pointer;
        }
        .item.active{
            background:#63bbd0;
            box-shadow:0  1px 4px  #e7a23f;
        }
        .item svg{
            width:20px;
            height:20px;
            margin-right:4px;
        }
        .tools .file{
            position:relative;
            z-index:1;
            width:120px;
        }
        .tools  .label{
            position:absolute;
            z-index:1;
            text-align:center;
            display:flex;
            align-items:center;
        }
        .reverse svg{
            transform:rotateY(180deg)
        }
    </style>
</head>
<body>
    <div class="tools">
        <div class="file radius item">
            <div class="label">
                <svg t="1693815261530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4921" width="200" height="200"><path d="M186.181818 558.545455h651.636364a139.636364 139.636364 0 0 1 0 279.272727H186.181818a139.636364 139.636364 0 0 1 0-279.272727z m0 93.090909a46.545455 46.545455 0 0 0 0 93.090909h651.636364a46.545455 46.545455 0 0 0 0-93.090909H186.181818z" fill="#E01313" p-id="4922"></path><path d="M186.181818 744.727273h651.636364a139.636364 139.636364 0 0 1 0 279.272727H186.181818a139.636364 139.636364 0 0 1 0-279.272727z m0 93.090909a46.545455 46.545455 0 0 0 0 93.090909h651.636364a46.545455 46.545455 0 0 0 0-93.090909H186.181818z" fill="#4D84DB" p-id="4923"></path><path d="M465.454545 69.818182v372.363636a46.545455 46.545455 0 1 0 93.09091 0v-372.363636a46.545455 46.545455 0 1 0-93.09091 0z" fill="#2CB18D" p-id="4924"></path><path d="M690.548364 290.769455a46.545455 46.545455 0 1 0 61.812363-69.53891l-209.454545-186.181818a46.545455 46.545455 0 0 0-61.858909 0l-209.454546 186.181818a46.545455 46.545455 0 1 0 61.905455 69.53891L512 132.096l178.548364 158.72z" fill="#2CB18D" p-id="4925"></path></svg>
                上传图片
            </div>
            <input type="file" id="imageUpload" >
        </div>
        <div class="color item">
            <input type="color" id="color"/>
        </div>
        <div class="item" onclick="undo()" title="撤销">
            <svg t="1693815491259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6823" width="200" height="200"><path d="M309.056 837.824h401.152a247.04 247.04 0 0 0 175.744-73.024 247.104 247.104 0 0 0 73.088-175.808 247.04 247.04 0 0 0-73.088-175.744 247.04 247.04 0 0 0-175.744-73.088H255.296a29.952 29.952 0 1 0 0 59.84h454.912a189.184 189.184 0 0 1 188.992 188.992 189.184 189.184 0 0 1-188.992 188.992H309.056a29.952 29.952 0 0 0 0 59.84z" fill="#1296db" fill-opacity=".65" p-id="6824"></path><path d="M80.064 335.104l187.136-143.488c20.096-15.488 45.248 3.84 45.248 34.688v287.04c0 30.912-25.152 50.176-45.248 34.752L80 404.608c-20.096-15.488-20.096-54.08 0-69.504z" fill="#1296db" p-id="6825"></path></svg>
        </div>
        <div class="item reverse" onclick="redo()" title="回撤">
            <svg t="1693815491259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6823" width="200" height="200"><path d="M309.056 837.824h401.152a247.04 247.04 0 0 0 175.744-73.024 247.104 247.104 0 0 0 73.088-175.808 247.04 247.04 0 0 0-73.088-175.744 247.04 247.04 0 0 0-175.744-73.088H255.296a29.952 29.952 0 1 0 0 59.84h454.912a189.184 189.184 0 0 1 188.992 188.992 189.184 189.184 0 0 1-188.992 188.992H309.056a29.952 29.952 0 0 0 0 59.84z" fill="#1296db" fill-opacity=".65" p-id="6824"></path><path d="M80.064 335.104l187.136-143.488c20.096-15.488 45.248 3.84 45.248 34.688v287.04c0 30.912-25.152 50.176-45.248 34.752L80 404.608c-20.096-15.488-20.096-54.08 0-69.504z" fill="#1296db" p-id="6825"></path></svg>
        </div>
        <div class="mask item" id="mask" title="擦除蒙版">
            <svg t="1693816056192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15228" width="200" height="200"><path d="M872.27 785.6H152.29c-19.88 0-36 16.12-36 36s16.12 36 36 36h719.98c19.88 0 36-16.12 36-36s-16.12-36-36-36zM230.81 715.5c8.3 8.3 19.34 12.88 31.09 12.89l272.94 0.19h0.04c11.75 0 22.8-4.58 31.11-12.89L892.08 389.6c17.15-17.15 17.15-45.07 0-62.22l-250.1-250.1c-8.31-8.31-19.36-12.89-31.11-12.89s-22.8 4.58-31.11 12.89L117.28 539.75c-17.15 17.16-17.15 45.07 0 62.22L230.81 715.5zM610.86 148l210.5 210.5-185.98 185.97-210.5-210.5L610.86 148zM373.97 384.88l210.5 210.5-61.19 61.19-249.75-0.18-85.54-85.54 185.98-185.97z" fill="#31D0C8" p-id="15229"></path></svg>
        </div>
        <div class="item full-screen" title="全屏">
            <svg t="1693816146633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17024" width="200" height="200"><path d="M298.7 352.6h428.7v255H298.7z" fill="#EF2929" p-id="17025"></path><path d="M850.6 719.9h-675V240h675v479.9z m-643-32h611V272h-611v415.9zM80.2 286.8c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h117.5c8.8 0 16 7.2 16 16s-7.2 16-16 16H96.2v110.8c0 8.9-7.2 16-16 16zM945 286.8c8.8 0 16-7.2 16-16V144c0-8.8-7.2-16-16-16H827.5c-8.8 0-16 7.2-16 16s7.2 16 16 16H929v110.8c0 8.9 7.1 16 16 16zM80.2 736.8c-8.8 0-16 7.2-16 16v126.8c0 8.8 7.2 16 16 16h117.5c8.8 0 16-7.2 16-16s-7.2-16-16-16H96.2V752.8c0-8.8-7.2-16-16-16zM945 736.8c8.8 0 16 7.2 16 16v126.8c0 8.8-7.2 16-16 16H827.5c-8.8 0-16-7.2-16-16s7.2-16 16-16H929V752.8c0-8.8 7.1-16 16-16z" fill="#EF2929" p-id="17026"></path></svg>
        </div>
        <div class="item" id="saveImg" title="保存">
            <svg t="1693884043178" class="icon" viewBox="0 0 1034 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8297" width="200" height="200"><path d="M234.796 295.822a69.301 69.301 0 1 0 138.602 0 69.301 69.301 0 0 0-138.602 0z m418.91 141.705c-13.447-13.446-38.272-16.55-55.855-3.103-3.104 0-3.104 3.103-5.172 3.103L465.455 564.752 379.604 478.9c-3.103-3.103-5.172-3.103-8.275-5.172-3.103 0-3.103-3.103-5.171-3.103-3.103-3.103-8.275-3.103-11.378-3.103h-3.103c-3.103 0-8.275 0-11.378 3.103h-3.103c-3.103 0-5.172 3.103-8.275 5.172-3.103 0-3.103 3.103-5.172 3.103l-102.4 97.228c-16.549 16.55-16.549 41.374 0 57.924 16.55 16.549 41.374 16.549 57.924 0l69.3-69.301 88.954 88.953c16.55 16.55 41.374 16.55 57.924 0 3.103-3.103 5.171-5.172 5.171-8.275l118.95-118.95 118.95 118.95s0 3.103 3.102 3.103c16.55 16.55 44.477 13.447 57.923-3.103s13.447-44.476-3.103-57.923l-142.739-149.98z m38.27 287.548H332.024c-21.721 0-41.373 19.652-41.373 41.373s19.652 41.374 41.373 41.374h359.952c21.721 0 41.373-19.652 41.373-41.374s-19.652-41.373-41.373-41.373z" p-id="8298" fill="#1296db"></path><path d="M816.097 61.026H207.903c-92.057 0-166.53 74.473-166.53 165.495v581.301c0 91.022 74.473 166.53 166.53 166.53h609.228c91.023 0 165.495-74.473 165.495-166.53v-581.3c0-91.023-74.472-165.496-166.529-165.496z m83.782 276.17v442.699c0 61.026-49.649 110.675-110.675 110.675H234.796c-61.026 0-110.675-49.649-110.675-110.675V254.448c0-61.026 49.649-110.674 110.675-110.674H788.17c61.026 0 110.674 49.648 110.674 110.674v82.748z" p-id="8299" fill="#1296db"></path></svg>
        </div>
    </div>
    <canvas id="canvas"></canvas>
    <script src="./canvas.js"></script>
    <script>
        const canvas = document.getElementById('canvas'); // 目标canvas
        const originCanvas = document.createElement('canvas');// 源canvas
        let canvasTools
        window.onload = function() {
            init()
        }
        function init() {
            canvas.setAttribute('style',`width:${document.body.clientWidth - 40}px; height: ${(document.body.clientHeight - 40 - document.querySelector('.tools').clientHeight)}px;`)
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;

            originCanvas.setAttribute('style',`width:${document.body.clientWidth - 40}px; height: ${(document.body.clientHeight - 40 - document.querySelector('.tools').clientHeight)}px;`)
            const oriCtx = originCanvas.getContext('2d');
            originCanvas.width = canvas.offsetWidth;
            originCanvas.height = canvas.offsetHeight;
            canvasTools = new CanvasTools(canvas, ctx,oriCtx);
            canvasTools.brushColor = document.getElementById('color').value
            var fileEl = document.getElementById('imageUpload')
            fileEl.onchange = function(e) {
                let file = e.target.files[0]
                const fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onload = (result) => {
                    // canvasTools.clear()
                    const base64Str = result.currentTarget.result;
                    canvasTools.drawImage(base64Str)
                };
            }
        }
        window.onresize = function(){
            canvas.setAttribute('style',`width:${document.body.clientWidth - 40}px; height: ${(document.body.clientHeight - 40 - document.querySelector('.tools').clientHeight)}px;`)
        }
        document.getElementById('mask').addEventListener('click',function(e) {
            canvasTools.isMask = !canvasTools.isMask
            let classStr = document.getElementById('mask').getAttribute('class')
            if(canvasTools.isMask) {
                document.getElementById('mask').setAttribute('class',classStr+' active')
            } else {
                classStr = classStr.replace('active','')
                document.getElementById('mask').setAttribute('class',classStr)
            }
        })
        document.getElementById('saveImg').addEventListener('click',function(e) {
            let base64 = canvasTools.getImageData()
            const downloadLink = document.createElement('a');
            downloadLink.href = base64;
            downloadLink.download = 'image.png';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        })
        document.getElementById('color').addEventListener('change',function(e) {
            console.log(e.target.value,'e.target.value')
            canvasTools.brushColor = e.target.value
        })
        function undo() {
            canvasTools.canvasUndo()
        }
        function redo() {
            canvasTools.canvasRedo()
        }
    </script>
</body>
</html>